/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState } from 'react'
import { Table, Button, Tag, type TableProps } from 'antd'
import config from '@/config'
type TableRowSelection<T extends object = object> =
  TableProps<T>['rowSelection']

interface ColumnProps {
  title?: string
  dataIndex?: string
  key?: string
  width?: number | string
  render?: (text: any, record: any, index?: number) => React.ReactNode
}

interface MyTableProps {
  columns: ColumnProps[]
  dataSource: any[]
  loading?: boolean
  pagination?: boolean | object
  onDeleteToParent?: (record: any) => void
  onUpdateToParent?: (record: any) => void
  onSelectIdsToParent?: (selectedRowKeys: React.Key[]) => void
  rowSelection?: TableRowSelection<any>
  rowKey?: string | ((record: any) => React.Key)
  onChange?: (pagination: any) => void
}

interface recordType {
  id: number
}

const MyTable: React.FC<MyTableProps> = ({
  columns,
  dataSource,
  loading = false,
  pagination = true,
  onDeleteToParent = () => {},
  onUpdateToParent = () => {},
  onSelectIdsToParent = () => {},
  rowSelection,
  rowKey = (record: recordType) => record.id,
  onChange
}) => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  // 点击删除时事件的逻辑
  // 假设父组件传递了一个名为 onDeleteToGood 的回调函数给 good 组件
  const handleDelClick = (record: any) => {
    console.log('点击删除事件触发，记录信息：', record)
    // 调用父组件传递给 good 组件的回调函数，向父组件传递数据
    onDeleteToParent(JSON.stringify(record))
  }
  // 点击修改时事件的逻辑
  const handleUpdateClick = (record: any) => {
    console.log('点击修改事件触发，记录信息：', record)
    onUpdateToParent(record)
  }
  // 处理表格行选择的逻辑
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys)
    setSelectedRowKeys(newSelectedRowKeys)
    // 将所有的数据传递给父组件
    onSelectIdsToParent(JSON.stringify(newSelectedRowKeys))
  }
  // 定义表格的 rowSelection 属性
  const defaultRowSelection: TableRowSelection<any> = {
    selectedRowKeys,
    onChange: onSelectChange
  }

  return (
    <Table
      bordered={true}
      // rowSelection={{
      //   type: 'checkbox'
      // }}
      rowSelection={rowSelection || defaultRowSelection}
      style={{ marginTop: 10 }}
      dataSource={dataSource}
      rowKey={rowKey}
      columns={columns.map((column) => {
        // 如果列已经有自定义的render函数，则直接使用它
        if (column.render) {
          return column;
        }
        
        return {
          ...column,
          render: (text, record) => {
            // 处理 photo 列，显示图片
            if (column.dataIndex === 'photo') {
              // 假设 record 是一个未知类型的对象，使用类型断言来解决属性不存在的问题
              //const recordWithPhoto = record as { photo: string };
              return (
                <img
                  src={config.imgUrl + text}
                  alt="商品图片"
                  style={{ width: '50px', height: '50px' }}
                />
              )
            } else if (column.dataIndex === 'desc') {
              // 使用 dangerouslySetInnerHTML 渲染 HTML 标签
              return <div dangerouslySetInnerHTML={{ __html: text }} />
            } else if (column.dataIndex === 'price') {
              return <div style={{ color: 'red' }}>￥ {text.toFixed(2)}</div>
            } else if (column.dataIndex === 'state') {
              // const statusMap = {
              //   1: '正常',
              //   2: '异常',
              //   3: '已停用'
              // };
              return (
                <div>
                  {text === true ? (
                    <Tag color="#f50">上架</Tag>
                  ) : (
                    <Tag color=" #87d068">下架</Tag>
                  )}
                </div>
              )
            } else if (column.dataIndex === 'action') {
              // 假设使用 antd 的 Button 组件，需要先导入
              return (
                <div>
                  <Button
                    type="primary"
                    onClick={() => handleUpdateClick(record)}
                  >
                    编辑
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => handleDelClick(record)}
                    danger
                  >
                    删除
                  </Button>
                </div>
              )
            }
            return text
          }
        }
      })}
      loading={loading}
      pagination={
        typeof pagination === 'boolean'
          ? pagination
            ? { pageSize: 10 }
            : false
          : pagination
      }
      onChange={onChange}
    />
  )
}

export default MyTable
